<template>
	<view class="template-mine tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#F8F8F8">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="">
					<text class="tn-margin-left tn-text-bold tn-text-xl leaf-color">我 的</text>
				</view>
			</view>
		</tn-nav-bar>

		<view class="" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
			<view v-if="!avatar" class="cu-avatar xl round bg-white">
				<view class="iconfont icon-people text-gray icon"></view>
			</view>
			<!-- 图标logo/头像 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin" style="position: relative; z-index: 9999 !important">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<view class="logo-pic">
							<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="logo-image" mode="widthFix"></image>
						</view>
						<view class="tn-padding-right">
							<view v-if="!name" @click="handleToLogin" class="tn-padding-right tn-padding-left-sm">点击登录</view>
							<view v-if="name" @click="handleToInfo" class="tn-padding-right tn-padding-left-sm">
								<view class="u_title">
									{{ name }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="justify-content-item">
					<view class="tn-icon-qr-code tn-color-gray--dark" style="font-size: 50rpx"></view>
				</view>
			</view>

			<view class="tn-margin tn-padding-top" style="position: relative; z-index: 9 !important">
				<view
					class="button-vip tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-lg"
					style="background: linear-gradient(120deg, #151515, #15041c, #2d2d2d, #363636)"
				>
					<view class="tn-margin-left tn-flex">
						<view class="tn-icon-sound" style="color: #facd8c; font-size: 55rpx; margin-left: -14rpx"></view>
						<view class="tn-text-sm" style="color: #facd8c; margin-top: 18rpx;margin-left: 18rpx;">这是一条通知</view>
					</view>
					<view class="tn-margin-right">
						<tn-button shape="round" size="sm" backgroundColor="#FAE8C2" fontColor="#6B462D" padding="30rpx 0" width="180rpx">
							<text class="tn-text-bold tn-text-sm">查看详情</text>
							<text class="tn-icon-right-fill tn-padding-left-xs tn-text-lg"></text>
						</tn-button>
					</view>
				</view>

				<view class="mine-shadow tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-lg tn-margin-top" @click="tn('/pages/mine/info/edit')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
							<view class="tn-icon-edit-form"></view>
						</view>
						<view class="tn-flex tn-margin-left tn-text-lg">
							<text class="clamp-text-1">编辑资料</text>
						</view>
					</view>
					<view class="tn-color-gray">
						<text class="tn-icon-right"></text>
					</view>
				</view>

				<view class="mine-shadow tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-lg tn-margin-top" @click="tn('/pages/mine/setting/index')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
							<view class="tn-icon-set"></view>
						</view>
						<view class="tn-flex tn-margin-left tn-text-lg">
							<text class="clamp-text-1">应用设置</text>
						</view>
					</view>
					<view class="tn-color-gray">
						<text class="tn-icon-right"></text>
					</view>
				</view>

				<view class="mine-shadow tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-lg tn-margin-top" @click="tn('/pages/mine/help/index')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
							<view class="tn-icon-help"></view>
						</view>
						<view class="tn-flex tn-margin-left tn-text-lg">
							<text class="clamp-text-1">常见问题</text>
						</view>
					</view>
					<view class="tn-color-gray">
						<text class="tn-icon-right"></text>
					</view>
				</view>

				<view class="tn-button--clear-style" open-type="share" @click="tn('/pages/mine/about/index')">
					<view class="mine-shadow tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-lg tn-margin-top">
						<view class="tn-flex tn-flex-col-center">
							<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
								<view class="tn-icon-my-add"></view>
							</view>
							<view class="tn-flex tn-margin-left tn-text-lg">
								<text class="clamp-text-1">关于我们</text>
							</view>
						</view>
						<view class="tn-color-gray">
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</view>

				<button class="tn-button--clear-style" open-type="contact">
					<view class="mine-shadow tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-padding-lg tn-margin-top">
						<view class="tn-flex tn-flex-col-center">
							<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
								<view class="tn-icon-service-simple"></view>
							</view>
							<view class="tn-flex tn-margin-left tn-text-lg">
								<text class="clamp-text-1">在线客服</text>
							</view>
						</view>
						<view class="tn-color-gray">
							<text class="tn-icon-right"></text>
						</view>
					</view>
				</button>
			</view>
		</view>

		<view class="tn-text-center tn-margin-top-xl tn-text-sm">
			<view @click="tn('/xxx/xxx/xxx')">
				<text class="tn-padding-right-xs tn-color-gray--dark">软梦科技</text>
				<text class="tn-color-gray">提供技术支持</text>
			</view>
		</view>

		<view class="tn-tabbar-height"></view>
	</view>
</template>

<script>
import storage from '@/utils/storage';

export default {
	name: 'mine',
	data() {
		return {
			name: this.$store.state.user.name,
			version: getApp().globalData.config.appInfo.version
		};
	},
	computed: {
		avatar() {
			return this.$store.state.user.avatar;
		},
		windowHeight() {
			return uni.getSystemInfoSync().windowHeight - 50;
		}
	},
	created() {
		 console.log("加载中")
		// this.getlistPendingTask();
	},
	methods: {
		handlePageShow() {
		     // 这里是页面每次显示时需要执行的逻辑
		     console.log('Page is shown1')
		   },
		handleToLogin() {
			this.$tab.reLaunch('/pages/login');
		},
		handleToAvatar() {
			this.$tab.navigateTo('/pages/mine/avatar/index');
		},
		handleToInfo() {
			this.$tab.navigateTo('/pages/mine/info/index');
		},
		// 跳转
		tn(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.template-mine {
	max-height: 94vh;
	max-height: calc(94vh + env(safe-area-inset-bottom) / 2);
	max-height: calc(94vh + constant(safe-area-inset-bottom));
	// background-color: #f8f7f8;
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;

	&__back {
		margin-left: 30rpx;
		position: absolute;
	}
}
/* 自定义导航栏内容 end */

/* 底部安全边距 start*/
.tn-tabbar-height {
	min-height: 140rpx;
	height: calc(160rpx + env(safe-area-inset-bottom) / 2);
	height: calc(160rpx + constant(safe-area-inset-bottom));
}

/* 用户头像 start */
.logo-image {
	width: 110rpx;
	height: 110rpx;
	position: relative;
	overflow: hidden;
	border-radius: 50%;
}

.logo-pic {
	background-size: cover;
	background-repeat: no-repeat;
	// background-attachment:fixed;
	background-position: center;
	border: 8rpx solid rgba(255, 255, 255, 1);
	// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	overflow: hidden;
	// background-color: #FFFFFF;
}

/* 页面阴影 start*/
.mine-shadow {
	border-radius: 24rpx;
	background-color: #ffffff;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.02);
}

/* 页面阴影 end*/

/* 图标容器1 start */
.icon1 {
	&__item {
		// width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 40rpx;
			height: 40rpx;
			font-size: 40rpx;
			border-radius: 50%;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
			}
		}
	}
}

/* 图标容器1 end */

/* 导航图片 start */
.nav-image {
	width: 50rpx;
	height: 50rpx;
	position: relative;
	overflow: hidden;
}

.nav-pic {
	background-size: cover;
	background-repeat: no-repeat;
	// background-attachment:fixed;
	background-position: center;
	// border: 1rpx solid rgba(255,255,255,0.05);
	// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	overflow: hidden;
	// background-color: #FFFFFF;
}

.button-vip {
	width: 100%;
	height: 120rpx;
	border-radius: 30rpx;
	position: relative;
	z-index: 1;

	&::after {
		content: ' ';
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: 0;
		border-radius: inherit;
		opacity: 1;
		transform: scale(1, 1);
		background-size: 100% 100%;
		background-image: url(https://resource.tuniaokj.com/images/oa/vip-bg3.png);
	}
}
</style>
